<template>
  <div class="authorization">
    <div class="card" v-for="item in list" :key="item.id">
      <label class="el-form-item-label">{{item.title}}</label>
      <div class="check">
        <el-checkbox
          border
          :indeterminate="item.isIndeterminate"
          v-model="item.checkAllAuth"
          @change="handleCheckAllAuth(item,$event)"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group
          v-model="item.checkedAuth"
          @change="handleCheckedAuthChange(item,$event)"
        >
          <el-checkbox
            border
            v-for="role in rolesList"
            :label="role"
            :key="role.role_id"
            >{{ role.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <footer>
        <el-button type="primary" @click="toSave">保存修改</el-button>
    </footer>
  </div>
</template>

<script>
import { getAllRolesAPI ,updateAllRolesAPI} from '@/api/authorization'
export default {
  name: "Authorization",
  data() {
    return {
      rolesList:[],
      list:[
        {
          id:1,
          title:'设置一级授权角色',
          isIndeterminate:true,
          checkedAuth:[],
          checkAllAuth:false
        },
        {
          id:2,
          title:'设置二级授权角色',
          isIndeterminate:true,
          checkedAuth:[],
          checkAllAuth:false
        }
      ]
    };
  },

  created() {
     this.getAllRoles()
  },

  methods: {
    async getAllRoles(){
      const res = await getAllRolesAPI()
      this.rolesList = res
      this.list[0].checkedAuth =res.filter(item => item.auth1 == 1)
      this.list[1].checkedAuth =res.filter(item => item.auth2 == 1)
    },
    async toSave(){
      const auth_role1 = this.list[0].checkedAuth.map(item=>item.role_id).join(",")
      const auth_role2 = this.list[1].checkedAuth.map(item=>item.role_id).join(",")
      try {
        await updateAllRolesAPI({
        auth_role1,
        auth_role2
      })
      this.$message.success('修改成功')
      } catch (error) {
        this.$message.error('修改失败')
      }

    },
    handleCheckAllAuth(item,val){
      item.checkedAuth = val ? this.rolesList : [];
      item.isIndeterminate = false;
    },
    handleCheckedAuthChange(item,value){
      let checkedCount = value.length;
      item.checkAllAuth = checkedCount === this.rolesList.length;
      item.isIndeterminate = checkedCount > 0 && checkedCount < this.rolesList.length;
    }
  }
};
</script>

<style scoped lang="scss">
.function-area:hover {
  transform: translate(0, -10px);
  transition: transform 0.5s ease-in-out;
  box-shadow: 0 10px 20px 1px rgba(49, 49, 49, 0.2);
  border: 1px solid #ffffff;
}
.authorization ::v-deep{
  padding: 50px;
  .card {
    width: 80%;
    margin-bottom: 30px;
    min-height: 180px;
  }
  .check{
    padding: 5px;
    padding-top: 15px;
    border: 1px dotted #448ef7 ;
    margin-top: 15px;
    border-radius: 6px;
    height: 220px;
    overflow-y: auto;
  }
  .el-checkbox.is-bordered.el-checkbox--small {
    margin: 0 20px 15px 10px;
  }
  footer {
    width: 80%;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
